@import "../../assets/styles/variables";

.message {
  $self: &;

  &__audio {
    background: $colorToMessage;
    box-shadow: 0 5px 5px rgba(54, 116, 225, 0);
    border-radius: 22px 22px 22px 3px;
    margin: 8px 0;
    padding: 25px;
    width: 250px;
    position: relative;
    overflow: hidden;

    audio {
      position: absolute;
    }

    #{$self}__audio-progress {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: $grey;
      transition: width 0.5s ease;
    }

    #{$self}__audio-info {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      #{$self}__audio-wave {
        width: 109px;
        height: 30px;
        background-image: url("../../assets/img/wave.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      #{$self}__audio-btn {
        position: relative;
        button {
          cursor: pointer;
          border: 0;
          width: 40px;
          height: 40px;
          border-radius: 30px;
          background: $colorToMessage;
          opacity: 0.6;
        }

        .btn-play {
          background-image: url("../../assets/img/play.svg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 30px;
        }

        .btn-pause {
          background-image: url("../../assets/img/pause.svg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 30px;
        }
      }

      #{$self}__audio-duration {
        position: relative;
        color: $white;
        font-weight: 500;
        font-size: 13px;
        opacity: 0.6;
      }
    }
  }

  &__audio--isMe {
    background: $colorFromMessage;
    border: 1px solid #ececec;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.0220444);
    border-radius: 22px 22px 3px 22px;
    order: 2;

    #{$self}__audio-progress {
      background-color: #e2e2e2;
    }

    #{$self}__audio-info {
      #{$self}__audio-wave {
        background-image: url("../../assets/img/wave-dark.svg");
      }

      #{$self}__audio-btn {
        button {
          background: $white;
          opacity: 0.7;
        }

        .btn-play {
          background-image: url("../../assets/img/play-dark.svg");
        }

        .btn-pause {
          background-image: url("../../assets/img/pause-dark.svg");
        }
      }

      #{$self}__audio-duration {
        color: $darkGray;
        opacity: 0.9;
      }
    }
  }
}